<template>
  <div>
    <div class="clolr">
      <span>商品统计</span>
      <el-button type="primary" class="bta" @click="shuaxin"> 刷新 </el-button>
    </div>
    <!-- 商品类目销售分析 -->
    <div class="bk clear" style="width: 90%;">
      <div class="clor clear">
        <span>商品类目销售分析</span>
        <!-- <div class="bta">
          <el-button size="mini">昨天</el-button>
          <el-button size="mini">最近7天</el-button>
          <el-button size="mini">最近30天</el-button>
        </div> -->
        <el-button size="mini" class="bt1" @click="daochua">导出</el-button>
      </div>
      <div id="main" style="width: 100%;height:400px;margin: 40px 25px;">

      </div>
      <template>
        <el-table :data="tableData" border style="width: 90%;margin:25px 5%">
          <el-table-column prop="datea" label="商品分类">
          </el-table-column>
          <el-table-column prop="namea" label="销量（件）">
          </el-table-column>
          <el-table-column prop="zb" label="占比">
          </el-table-column>
          <el-table-column prop="xse" label="销售额（元）">
          </el-table-column>
          <el-table-column prop="zb2" label="占比">
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- 商品销售明细 -->
    <div class=" bk clear" style="width: 90%;">
      <div class="clor clear">
        <span>商品类目销售分析</span>
        <!-- <div class="bta">
          <el-button size="mini">昨天</el-button>
          <el-button size="mini">最近7天</el-button>
          <el-button size="mini">最近30天</el-button>
        </div> -->
        <el-button size="mini" class="bt1" @click="daochua2">导出</el-button>
        <el-dropdown class="fd">
          <el-button type="primary">
            排序方式<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>首字母</el-dropdown-item>
            <el-dropdown-item>长短</el-dropdown-item>
            <el-dropdown-item>占比大小</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 图表 -->
      <el-table ref="multipleTable" :data="tableData2" id="main2" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="序号" width="70">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称">
        </el-table-column>
        <el-table-column prop="lll" label="浏览量">
        </el-table-column>
        <el-table-column prop="llrs" label="浏览人数">
        </el-table-column>
        <el-table-column prop="fkrs" label="付款人数">
        </el-table-column>
        <el-table-column prop="dpzhl" label="单品转化率">
        </el-table-column>
        <el-table-column prop="xssl" label="销售数量">
        </el-table-column>
        <el-table-column prop="xsje" label="销售金额" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <span class="demonstration"></span>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5, 6, 7, 8]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="40">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent
]);


export default {
  data() {
    return {
      // tableData: [{
      //   datea: '男士',
      //   namea: '306',
      //   zb: '30.6%',
      //   xse: '￥ 20000',
      //   zb2: '50%'
      // }, {
      //   datea: '女士',
      //   namea: '194',
      //   zb: '19.4%',
      //   xse: '￥ 10000',
      //   zb2: '25%'
      // }, {
      //   datea: '童装',
      //   namea: '86',
      //   zb: '8.6%',
      //   xse: '￥ 5000',
      //   zb2: '12.5%'
      // }, {
      //   datea: 'OUTLETS',
      //   namea: '44',
      //   zb: '4.4%',
      //   xse: '￥2000',
      //   zb2: '5%'
      // }, {
      //   datea: '双肩背包',
      //   namea: '200',
      //   zb: '20%',
      //   xse: '￥1000',
      //   zb2: '2.5%'
      // }, {
      //   datea: '超轻背包',
      //   namea: '170',
      //   zb: '17%',
      //   xse: '￥2000',
      //   zb2: '5%'
      // }],
      //     tableData2: [{
      //       date: '1',
      //       name: '2019新款冲锋衣',
      //       lll: '1000',
      //       llrs: '500',
      //       fkrs: '200',
      //       dpzhl: '20%',
      //       xssl: '500',
      //       xsje: '$2000'
      //     }, {
      //       date: '1',
      //       name: '2019新款冲锋衣',
      //       lll: '1000',
      //       llrs: '500',
      //       fkrs: '200',
      //       dpzhl: '20%',
      //       xssl: '500',
      //       xsje: '$2000'
      //     }, {
      //       date: '1',
      //       name: '2019新款冲锋衣',
      //       lll: '1000',
      //       llrs: '500',
      //       fkrs: '200',
      //       dpzhl: '20%',
      //       xssl: '500',
      //       xsje: '$2000'
      //     }, {
      //       date: '1',
      //       name: '2019新款冲锋衣',
      //       lll: '1000',
      //       llrs: '500',
      //       fkrs: '200',
      //       dpzhl: '20%',
      //       xssl: '500',
      //       xsje: '$2000'
      //     }, {
      //       date: '1',
      //       name: '2019新款冲锋衣',
      //       lll: '1000',
      //       llrs: '500',
      //       fkrs: '200',
      //       dpzhl: '20%',
      //       xssl: '500',
      //       xsje: '$2000'
      //     }, {
      //       date: '1',
      //       name: '2019新款冲锋衣',
      //       lll: '1000',
      //       llrs: '500',
      //       fkrs: '200',
      //       dpzhl: '20%',
      //       xssl: '500',
      //       xsje: '$2000'
      //     }, {
      //       date: '1',
      //       name: '2019新款冲锋衣',
      //       lll: '1000',
      //       llrs: '500',
      //       fkrs: '200',
      //       dpzhl: '20%',
      //       xssl: '500',
      //       xsje: '$2000'
      //     }]
      //   }
      // },
      totalData: [],
      totalData2: [],
      nowPage: 1,
      count: 5,
      count2: 6,
    };
  },

  mounted: function () {
    this.getUserList();
    this.getUserList2();
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
      title: {
        text: '一级分类商品',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        right: 450,
        top: 100,
        bottom: 20,
      },
      series: [
        {
          type: 'pie',
          radius: '90%',
          right: 600,
          data: [
            { value: 306, name: '男士' },
            { value: 194, name: '女士' },
            { value: 86, name: '童装' },
            { value: 44, name: 'OUTLETS' },
            { value: 200, name: '双肩背包' },
            { value: 170, name: '超轻背包' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    myChart.setOption(option);
  },

  methods: {
    handleChange(val) {
      console.log(val);
    },
    handleClick(row) {
      console.log(row);
    },
    // 刷新
    shuaxin() {
      this.$message({
        message: "刷新成功",
        type: "success",
      });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.nowPage = val;
    },
    handleCurrentChange: function (val) {
      console.log(`当前页: ${val}`);
      this.nowPage = val;
    },
    // 导出
    daochua() {
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#main'), xlsxParam)

      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '用户列表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
    },
    // 导出2
    daochua2() {
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#main2'), xlsxParam)

      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '用户列表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
    },
    // 获取数据
    getUserList() {
      // console.log("获取数据");
      this.$axios({
        url: "/goodst/goodstt",
      }).then((res) => {
        this.totalData = res.data.data;
        console.log(res.data.data);
      });
    },
    // 获取数据
    getUserList2() {
      // console.log("获取数据");
      this.$axios({
        url: "/goodst/goodsttt",
      }).then((res) => {
        this.totalData2 = res.data.data;
        console.log(res.data.data);
      });
    },
  },

  computed: {
    tableData2() {
      return this.totalData.slice(
        (this.nowPage - 1) * this.count,
        this.nowPage * this.count
      );
    },
    tableData() {
      return this.totalData2.slice(
      );
    },
  },
}
</script>



<style scoped>
.fd {
  float: right;
}
.clear::after {
  content: "";
  display: block;
  clear: both;
}

.bk {
  /* background-color: black; */
  border: 1px solid #e4e4e4;
  margin: 20px 25px 20px 25px;
  padding: 0 20px 10px 0;
  /* height: 870px; */
}

.bta {
  float: right;
}
.bt1 {
  float: right;
}
.clor {
  background-color: #f2f2f2;
  height: 40px;
  padding: 10px 40px;
}
.clolr {
  background-color: #f2f2f2;
  height: 40px;
  padding: 10px 15px;
}
.clolr > span {
  line-height: 40px;
}
.el-main {
  padding: 0;
}
.fenye {
  text-align: center;
  margin: 20px 0;
}
</style>